<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    function faceChange() {
        var selectObj = document.getElementById("faceSelect");
        //弹出消息框
        alert(selectObj.value);
        //在控制台打印
        console.log("****************************");
        //得到图片对象
        var imgObj = document.getElementById("faceImg");
        if (selectObj.value == "1") {
            imgObj.src = "img/1.jpg"
        } else if (selectObj.value == "4") {
            imgObj.src = "img/4.jpg"
        } else if (selectObj.value =="3") {
            imgObj.src = "img/3.jpg"
        } else if (selectObj.value == "2") {
            imgObj.src = "img/2.jpg"
        }
    }
    function changeImg(selectObj){
        document.getElementById("faceImg").src=selectObj.value;
        document.getElementById("bodyObj").style.backgroundImage=
            "url("+selectObj.value+")"
    }

</script>
<body id="bodyObj">
<img src="img./1.jpg" width="300" height="300" id="faceImg"><br>
<!-- onchange当下拉框变化时触发的事件-->
<select id="faceSelect" onchange="changeImg(this)">
    <option value="img/1.jpg">春香</option>
    <option value="img/2.jpg">夏香</option>
    <option value="img/3.jpg">秋香</option>
    <option value="img/4.jpg">冬香</option>
</select>
</body>
</html>